<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="referrer" content="never">
    <title>礼品部分</title>
    <script src="./js/rem.js"></script>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2345015_3rxgf0otp6c.css

    ">
    <link rel="stylesheet" href="./css/gzbxh.css">

</head>

<body>
    <div class="xh">
        <!-- 头部部分 -->
        <div class="header">
            <div class="header-left">
                <i class="jt iconfont icon-right-angle-copy"></i>
            </div>
            <div class="header-conter">礼品</div>
            <div class="header-right">
                <i class="ej iconfont icon-erji"></i>
                <p class="header-item  ">
                    <i class="cd iconfont icon-caidan"></i>
                </p>
            </div>
            <div class="header-last">
                <li class="header-title">
                    <a href="">
                        <i class="fz iconfont icon-house"></i>
                        <p>首页</p>
                    </a>
                </li>
                <li class="header-title">
                    <a href="">
                        <i class="fz iconfont icon-fenleisousuo"></i>
                        <p>分类搜索</p>
                    </a>
                </li>
                <li class="header-title">
                    <a href="">
                        <i class="fz iconfont icon-gouwuche"></i>
                        <p>购物车</p>
                    </a>
                </li>
                <li class="header-title">
                    <a href="">
                        <i class="fz iconfont icon-xiaolian"></i>
                        <p>我的</p>
                    </a>
                </li>
            </div>
        </div>
        <!-- 搜索栏 -->
        <div class="nav">
            <li class="nav-item active">综合</li>
            <li class="nav-item">销量</li>
            <li class="nav-item">价格
                <i class="shang iconfont icon-youjiantou"></i>
                <i class="xia iconfont icon-down"></i>
            </li>
            <li class="nav-item">新品</li>
        </div>
        <!-- purposse -->
        <div class="purposse">
            <li class="purposse-item ">
                <a  href="./gzbxh-svy.html"> 送女友</a>
            </li>
            <li class="purposse-item">
                <a href="./gzbxh-sny.html">送男性</a>
            </li>
            <li class="purposse-item">
                <a href="./gzbxh-spy.html"> 送朋友</a> </li>
            <li class="purposse-item">
                <a href="./gzbxh-szb.html">送长辈</a> </li>
            <li class="purposse-item">
                <a class="sx" href="javascript:;">筛选
                   <i class="sj iconfont icon-arrUp-fill-copy"></i>
                </a> 
            </li>
            <!-- 筛选弹窗 -->
            <div class="aside">
                <div class="layer">
                    <div class="layer-top">
                        <p>人群</p>
                        <div class="layer-item">
                            <li>
                                <a  href="javascript:;">送女友</a>
                            </li>
                            <li><a href="javascript:;">送男性</a></li>
                            <li><a href="javascript:;">送朋友</a></li>
                            <li><a href="javascript:;">送长辈</a></li>
                        </div>
                        <p>场合</p>
                        <div class="layer-item">
                            <li>
                                <a href="javascript:;">爱情鲜花</a>
                            </li>
                            <li><a href="javascript:;">生日鲜花</a></li>
                            <li><a href="javascript:;">探病慰问</a></li>
                            <li><a href="javascript:;">商务鲜花</a></li>
                            <li>
                                <a href="javascript:;">祝福庆贺</a>
                            </li>
                            <li><a href="javascript:;">婚庆鲜花</a></li>
                            <li><a href="javascript:;">道歉鲜花</a></li>
                            <li><a href="javascript:;">哀思鲜花</a></li>
                        </div>
                        <p>花材</p>
                        <div class="layer-item">
                            <li>
                                <a href="javascript:;">玫瑰</a>
                            </li>
                            <li><a href="javascript:;">百合</a></li>
                            <li><a href="javascript:;">康乃馨</a></li>
                            <li><a href="javascript:;">向日葵</a></li>
                            <li><a href="javascript:;">扶郎</a></li>
                            <li><a href="javascript:;">绣球</a></li>
                            <li><a href="javascript:;">郁金香</a></li>
                            <li><a href="javascript:;">马蹄莲</a></li>
                        </div>
                        <p>类别</p>
                        <div class="layer-item">
                            <li>
                                <a href="javascript:;">传情花束</a>
                            </li>
                            <li><a href="javascript:;">创意花盒</a></li>
                            <li><a href="javascript:;">瓶插花</a></li>
                            <li><a href="javascript:;">精致花篮</a></li>
                            <li><a href="javascript:;">开业花篮</a></li>
                            <li><a href="./gzbxh-sjsk.html">设计师款</a></li>
                        </div>
                        <p>颜色</p>
                        <div class="layer-item">
                            <li>
                                <a href="javascript:;">红色</a>
                            </li>
                            <li><a href="javascript:;">粉色</a></li>
                            <li><a href="javascript:;">香槟色</a></li>
                            <li><a href="javascript:;">黄色</a></li>
                            <li><a href="javascript:;">白色</a></li>
                            <li><a href="javascript:;">紫色</a></li>
                            <li><a href="javascript:;">蓝色</a></li>
                        </div>
                    </div>
                    <div class="layer-bottom">清除选择</div>
                </div>
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="container">
            <div class="conter">
            </div>
        </div>

        <!-- 侧边栏 -->
        <div class="find">
            <a class="frind iconfont icon-erji" href="javascript:;"></a>
            <a class="top iconfont icon-huidaodingbu" href="javascript:;"></a>

        </div>

        <!-- 耳机弹窗 -->
        <!-- 人工客服谷谷 -->
        <div class="chat">
            <div class="chat-top">
                <span class="chat-ber">谷谷</span>
                <span class="chat-sj iconfont icon-down"></span>
            </div>
            <div class="chat-bottom">
                <div class="btn-top">
                    <div class="btn-item">
                        <img src="https://tenant-assets.meiqiausercontent.com/avatars/111117/gzZ0/yJdp9JhqPVtOpczqtHja.jpg" alt="">
                        <div class="base">
                            <div class="msg"></div>
                            <div class="per">
                                您好，我是您的专属订花顾问谷谷，请问有什么可以帮您？
                            </div>

                        </div>
                    </div>
                    <div class="btn-conter"></div>
                </div>
                <div class="btn-bottom">
                    <div class="tip-top">
                        <i class="xl iconfont icon-xiaolian"></i>
                        <i class="tb iconfont icon-tupian"></i>
                        <i class="zan iconfont icon-zan"></i>
                        
                    </div>
                    <div class="tip-bottom">
                        <input class="input" placeholder="请输入" type="text">
                        <div class="fs">发送</div>
                    </div>
                    <div class="xlitem">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </div>
                    <div class="zanitem">
                        <div class="zan-top">
                            <div class="zan-one">您对本次服务满意吗？
                                <i class="gb"></i>
                            </div>
                            <div class="zan-two">
                                <div class="eval">
                                    <p class="evala-img"></p>
                                    <p class="eval-desc">好评</p>
                                </div>
                                <div class="eval">
                                    <p class="evalb-img"></p>
                                    <p class="eval-desc">中评</p>
                                </div>
                                <div class="eval">
                                    <p class="evalc-img"></p>
                                    <p class="eval-desc">差评</p>
                                </div>
                            </div>
                            <div class="zan-three">
                                
                                <textarea placeholder="请填写评价内容（选填）" ></textarea>
                                <a class="zan-four" href="javascript:;">提交</a>
                            </div>
                        </div>
                        <div class="zan-top"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 机器人客服小花 -->
        <div class="chat">
            <div class="chat-top">
                <span class="chat-ber">机器人客服小花</span>
                <span class="chat-sj iconfont icon-down"></span>
            </div>
            <div class="chat-bottom">
                <div class="btn-top">
                    <div class="btn-item">
                        <img src="https://tenant-assets.meiqiausercontent.com/pics.meiqia.bucket/86d1d383c0f6cf72" alt="">
                        <div class="base">
                            <div class="msg"></div>
                            <div class="pers">
                              <div class="pers-top">欢迎光临Hua.com花礼网，我是机器人客服小花，很高兴为您服务！我们提供很多精美的鲜花、蛋糕、礼品款式，适用于各类送礼场景，24小时均可自助下单哦~现在客服MM们都下班啦，如需咨询，请您选择留言，我们一定会在上班后第一时间回复您，谢谢~  </div>
                              <div class="pers-bottom">
                                  <div class="pers-one"></div>
                                  <div class="pers-two">常见问题:</div>
                                  <div class="pers-three">
                                      <p>1. 可以送花吗？</p>
                                      <p>2. 怎么下单呢？</p>
                                      <p>3. 请问下单多久可以送到？</p>
                                      <p>4. 请问有哪些支付方式？</p>
                                  </div>
                                  <div class="pers-five">点击问题或回复数字查看答案</div>
                              </div>
                            </div>

                        </div>
                    </div>
                    <div class="btn-conter"></div>
                </div>
                <div class="btn-bottom">
                    <div class="tip-top">
                        <i class="xl iconfont icon-xiaolian"></i>
                        <i class="tb iconfont icon-tupian"></i>
                        
                    </div>
                    <div class="tip-bottom">
                        <input class="input" placeholder="请输入" type="text">
                        <div class="fs">发送</div>
                    </div>
                    <div class="xlitem">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </div>
                    <div class="zanitem">
                        <div class="zan-top">
                            <div class="zan-one">您对本次服务满意吗？
                                <i class="gb"></i>
                            </div>
                            <div class="zan-two">
                                <div class="eval">
                                    <p class="evala-img"></p>
                                    <p class="eval-desc">好评</p>
                                </div>
                                <div class="eval">
                                    <p class="evalb-img"></p>
                                    <p class="eval-desc">中评</p>
                                </div>
                                <div class="eval">
                                    <p class="evalc-img"></p>
                                    <p class="eval-desc">差评</p>
                                </div>
                            </div>
                            <div class="zan-three">
                                <textarea placeholder="请填写评价内容（选填）" ></textarea>
                                <a class="zan-four" href="javascript:;">提交</a>
                            </div>
                        </div>
                        <div class="zan-top"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="./js/jquery.js"></script>
    <script>
        // 初始化 各部分开关
        var we = false; // 综合开关
        var seless = false; // 销量开关
        var price = false; // 价格开关下
        var pricetop = false; // 价格开关上
        var product = false; //新品开关
        var woman = false;// 送女友开关
        var male = false; //送男性
        var friend = false; // 送朋友
        var elder = false;// 送长辈
        var love = false; //爱情鲜花
        var birthday = false;//生日鲜花
        var tbww = false;//探病慰问
        var business = false;//商务鲜花
        var bless = false;//祝福庆贺
        var letter = false;//道歉鲜花
        var grief = false;//哀思鲜花
        var baihe = false;//百合
        var fulang = false;//扶朗
        var xiuqiu = false;//绣球
        var yujin = false;//郁金香
        var matilian = false;//马蹄莲
        var chuangyi = false;//创意花盒
        var pch = false;//瓶插花
        var red = false;//红色
        var fense = false;//粉色
        var xbs = false; //香槟色
        var yellow = false;//黄色
        var zise = false;//紫色
        var lanse = false;//蓝色
        var baise = false;//白色

        ! function initialize() {
        var j = 0;
        var flag = true;
        // 初始化加载数据

        function play() {
            $.ajax({
                url: './api/礼品.json',
                method: 'get',
                dataType: 'json',
                success: function (data) {
                    auto(data)

                }
            })
        }
        play()
        

        function auto(data) {
            if (data.code == 200) {
                var arr=[];
                // 每次渲染十条信息  j初始值为0；往后每次加十
                for(var i=0+j;i<10+j;i++){
                    arr.push(data.data[i])
                }
                var html = '';
                console.log(arr);
                arr.forEach(function (item) {
                    html += `
                    <li class="conter-title">
                    <img src="${item.imgurl}"></img>
                    <div class="conter-item">
                    <p class="conter-title">${item.title}</p>
                    <p class="conter-desc">${item.desc}</p>
                    <p class="conter-price">￥${item.price}</p>
                    </div>
                    </li>
                    `
                })
               
                $('.conter').append(html);
                flag = true;
                we = true;

            } else {
                $('.conter').append('已经到底了...');
            }
        }


        // 无限滚动加载
        $(window).scroll(function () {
            if (we == true) {
                var scrollTop = $(window).scrollTop();
                var winH = $(window).height();
                var pageH = $(".conter").offset().top + $(".conter").height();
                if (scrollTop + winH >= pageH - 100) {

                    if (flag) {
                        flag = false;
                        // 每一次请求数据数量加10
                        j+=10;
                        play()
                    }
                }
            }


        })

        // 点击综合  初始化数据
        $('.nav-item').eq(0).click(function () {
            // 清除内容
            $('.conter').html('');
            page = 1
            we = true; // 综合开关
            seles = false; // 销量开关 
            price = false; // 价格开关下
            pricetop = false; // 价格开关上
            product = false; //新品开关
            woman=false;// 送女友开关
            male=false; //送男性
            friend=false; // 送朋友
            elder=false;// 送长辈
            play();
        })
    }()
    </script>
    <script src="./js/gzbysh.js"></script>
</body>

</html>